Angular Material এর MatSnackbar কম্পোনেন্টটি ব্যবহারকারীদের ইন্টারঅ্যাকশন বা তথ্য প্রদর্শনের জন্য একটি স্ন্যাকবার বার (Snackbar bar) প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত একটি ছোট বার যা অ্যাপ্লিকেশনের নিচের অংশে প্রদর্শিত হয় এবং একটি নির্দিষ্ট সময়ের জন্য দৃশ্যমান থাকে।
Snackbar এর দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য রয়েছে:
Angular Material এর MatSnackbar কম্পোনেন্টের মাধ্যমে আপনি এই দুটি বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।
প্রথমে আপনাকে MatSnackBar ব্যবহার করার জন্য এটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।
app.module.ts ফাইলে MatSnackBarModule ইমপোর্ট করাimport { MatSnackBarModule } from '@angular/material/snack-bar';
@NgModule({
imports: [
MatSnackBarModule
]
})
export class AppModule { }
এখন আপনি MatSnackBar কম্পোনেন্ট ব্যবহার করতে পারবেন।
Snackbar এর স্থায়ীত্ব কাস্টমাইজ করতে হলে, MatSnackBar এর open() মেথডের মধ্যে duration প্যারামিটারটি নির্ধারণ করতে হবে। duration প্যারামিটারটির মান মিলিসেকেন্ডে প্রদান করা হয় (যেমন, ২০০০ মিলিসেকেন্ড = ২ সেকেন্ড)।
import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private snackBar: MatSnackBar) {}
openSnackbar() {
this.snackBar.open('This is a snackbar message!', 'Close', {
duration: 3000 // Snackbar 3 সেকেন্ডের জন্য দৃশ্যমান থাকবে
});
}
}
এখানে:
Snackbar এর পজিশন পরিবর্তন করতে, MatSnackBar এর open() মেথডে horizontalPosition এবং verticalPosition প্যারামিটার ব্যবহার করা হয়। এই প্যারামিটারগুলি snackbar বারটির অনুভূমিক এবং উল্লম্ব অবস্থান কাস্টমাইজ করতে সহায়ক।
start: বাম পাশেcenter: স্ক্রীনের মাঝখানেend: ডান পাশেtop: স্ক্রীনের উপরের দিকেbottom: স্ক্রীনের নিচেimport { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private snackBar: MatSnackBar) {}
openSnackbar() {
this.snackBar.open('Snackbar with custom position!', 'Close', {
duration: 3000,
horizontalPosition: 'center', // স্ক্রীনের মাঝখানে
verticalPosition: 'top' // স্ক্রীনের উপরের দিকে
});
}
}
এখানে:
'center' সেট করার মাধ্যমে snackbar স্ক্রীনের মাঝখানে থাকবে।'top' সেট করার মাধ্যমে snackbar স্ক্রীনের উপরের দিকে থাকবে।Snackbar এর মধ্যে আপনি কাস্টম স্টাইলিংও যোগ করতে পারেন। এছাড়া, snackbar বারটির সাথে একটি অ্যাকশন বাটন (যেমন Close) যোগ করতে পারবেন। এই বাটনে ক্লিক করলে snackbar বন্ধ হয়ে যাবে।
import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private snackBar: MatSnackBar) {}
openSnackbar() {
this.snackBar.open('Snackbar with action button', 'Undo', {
duration: 3000,
horizontalPosition: 'end',
verticalPosition: 'bottom'
}).onAction().subscribe(() => {
console.log('Undo action clicked!');
});
}
}
এখানে:
Snackbar এর স্টাইল কাস্টমাইজ করতে আপনি CSS ব্যবহার করতে পারেন। যেমন, আপনি snackbar এর ব্যাকগ্রাউন্ড রং বা ফন্ট স্টাইল পরিবর্তন করতে পারেন।
.mat-snack-bar-container {
background-color: #4caf50; /* সবুজ ব্যাকগ্রাউন্ড */
color: white; /* সাদা টেক্সট */
}
এটি mat-snack-bar-container ক্লাসকে টার্গেট করে, যা snackbar এর কন্টেইনারের স্টাইল নির্ধারণ করে।
Angular Material Snackbar কম্পোনেন্টের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনে ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব বার তৈরি করতে পারেন। duration প্যারামিটার ব্যবহার করে snackbar এর স্থায়ীত্ব কাস্টমাইজ করা যায় এবং horizontalPosition এবং verticalPosition প্যারামিটার ব্যবহার করে snackbar এর পজিশন নির্ধারণ করা যায়। এই দুটি বৈশিষ্ট্য আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও কার্যকর এবং উন্নত করতে সাহায্য করবে।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
